<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>智能通风模式</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .main-top {
            border: 1px solid #f2f2f2;
            border-radius: 5px;
            background-color: #ffffff;
            margin-bottom: 15px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
        }

        .main-top>div {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .m-form {
            padding: 20px 20px 0 0;
        }
    </style>
</head>

<body>
    <div class="main-top">
        <div>
            <div>菜单栏：</div>
            <button type="button" class="layui-btn layui-btn-normal" id="add">新增</button>
            <button type="button" class="layui-btn layui-btn-warm">调整</button>
            <button type="button" class="layui-btn layui-btn-danger">删除</button>
            <button type="button" class="layui-btn">启动任务</button>
            <button type="button" class="layui-btn layui-btn-danger">停止任务</button>
            <button type="button" class="layui-btn layui-btn-normal">刷新</button>
        </div>
    </div>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <table class="layui-hide" id="currentTableId-1" lay-filter="currentTableFilter"></table>
        </div>
    </div>

    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;
                layui.jquery, layer = layui.layer;
                laydate = layui.laydate;


            table.render({
                elem: '#currentTableId-1',
                url: '../api/table2.json',
                toolbar: '#toolbarDemo1',
                cols: [[
                    { field: 'field0', title: '生效仓库' },
                    { field: 'field1', title: '智能方案' },
                    { field: 'field2', title: '自动动作' },
                    { field: 'field3', title: '生效时间' },
                    { field: 'field4', title: '失效时间' },
                    { field: 'field5', title: '状态' }
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });
            $('#add').click(function (e) {
                e.preventDefault()
                layer.open({
                    type: 1 //此处以iframe举例
                    , title: '智能通风配置信息'
                    , area: ['680px', '420px']
                    , maxmin: true
                    , content: `
                    <form class="layui-form m-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">生效列表</label>
                <div class="layui-input-inline">
                    <select>
                        <option value="">请选择仓库</option>
                        <optgroup>
                            <option>一号仓库</option>
                            <option>二号仓库</option>
                        </optgroup>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">智能方案</label>
                <div class="layui-input-inline">
                    <select>
                        <option value="">请选择智能方案</option>
                        <optgroup>
                            <option>方案一</option>
                            <option>方案二</option>
                        </optgroup>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">自动动作</label>
                <div class="layui-input-inline">
                    <select>
                        <option value="">请选择动作</option>
                        <optgroup>
                            <option>4756</option>
                            <option>2014</option>
                        </optgroup>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select>
                        <option value="">请选择状态</option>
                        <optgroup>
                            <option>已完成</option>
                            <option>进行中</option>
                            <option>待执行</option>
                        </optgroup>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">生效时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test-1" placeholder="请选择生效时间">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">失效时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test-2" placeholder="请选择失效时间">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">修改时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test-3" placeholder="请选择修改时间">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">修改人</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" placeholder="请输入修改人">
                </div>
            </div>
        </div>
    </form>
                    `
                    , btn: ['确定', '取消']
                    , btnAlign: 'c' //按钮居中
                    , success: function () {
                        //右上角关闭回调
                        form.render('select')
                    }
                });


                laydate.render({
                    elem: '#test-1',
                    type: 'datetime'
                });
                laydate.render({
                    elem: '#test-2',
                    type: 'datetime'
                });
                laydate.render({
                    elem: '#test-3',
                    type: 'datetime'
                });
            })
        })
    </script>

</body>

</html>